<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="send">发送</button>
  <button id="ddd">123</button>
  <script>
    /**
     * 方式1： BroadcastChannel // 不可以跨域
     * 方式2： localStorage
     * 方式3： postMessage  //可以跨域
    */
    const btn = document.querySelector('#send')
    const btn1 = document.querySelector('#ddd')
    //使用BroadcastChannel建立广播通道
    const broad = new BroadcastChannel('music')
    let id = 0
    // 监听标签页第一次打开
    broad.onmessage = function (e) {
      id++
      console.log(e.data);
    }
    let otherWindow = null
    btn.addEventListener('click', function () {
      // 第一次打开标签页
      if (id === 0) {
        otherWindow = window.open('./music.html')
        window.addEventListener('message', function (e) {
          console.log(123, e.data);
        })
      } else {
        // 发送消息
        broad.postMessage('hello, music, I coming')
        console.log(window.location);
      }

    })
    btn1.addEventListener('click', function () {
      if(otherWindow) {
        otherWindow.postMessage('sssssss', '*')
      }
    })
    
  </script>
</body>

</html>